import { Button, Input, Tabs } from 'antd';
import { connect } from 'dva';
import React, { useEffect, useState } from 'react';
import styles from './index.less';
const { TabPane } = Tabs;

const memberInformation = props => {
  const { form, dispatch } = props;
  const [isLogin, setIsLogin] = useState(false)
  const [account,setAccount] = useState('')
  const [password,setPassword] = useState('')
  const [advantageList, setAdvantageList] = useState([
    { icon: "https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng2435b705630e58ce875849c86e5d4e0b0c4e25e1dfff9badfa7d7ddaa0a0cc4e", title: "一站式服务", desc: "互联网那些事儿，太麻烦我们帮您全部搞定" },
    { icon: "https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngc30fa064c3fc2e285b0c456ad75ddb7528aaa73accc7dd45bb493730215a413e", title: "全网络推广", desc: "互联网那些事儿，太麻烦我们帮您全部搞定" },
    { icon: "https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng4d9a3382c706a54dd4204e7e646dc89531bdd0a4552d58fdb4af9957959d197f", title: "无理由退款", desc: "互联网那些事儿，太麻烦我们帮您全部搞定" },
    { icon: "https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPnga7c831ef97ccb0f774332bf2010e4206f233d5eb6829f19dabdf96199c57ed64", title: "自助式研发", desc: "互联网那些事儿，太麻烦我们帮您全部搞定" },
  ])
  const [directionList, setDirectionList] = useState([
    { img: "https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngd00e964583c37dd210db75b9ae6900b5507c98c3ecaea061d110464efa311bea", title: "VR  ·  全景网站", desc: "普通全景直观形象，但内容信息不够丰富，传统网站内容丰富，但展示不直观不形象，VR  ·  全景网站就是普通全景与传统网站的融合，内容丰富详细展示又直观形象，既可当网站使用，还可以随时变化" },
    { img: "https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng80c8269af52c6a312ea794e2fa9b5eda6986b99ef723e002dcec83706a0c37a4", title: "AI  ·  智能网站", desc: "市场的网站大致分两种，一种是网站模板，有多种风格可以选择，但是无法根据求定制，但做好猴不方便修改AI  ·  智据需求定制。另一种是定制网站，可根能网站，既可在现有风格中选择，也可以根据需求定制" },
    { img: "https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng53e3a44fb8e5224bc85aacf463f45a4805e2089a8545bf5d8a5c79c576f33659", title: "云网站", desc: "独立的网站，独立的域名，打造自己的独立品牌，商务版两网合一、数据同步专业团队根据不同行业量身打造，定制行业标准，时代风尚，标准设计模块配置、定制版本、海量风格、任由挑选，让您省时省事" },
  ])
  useEffect(() => {
    // localStorage.setItem('deptId',props?.location?.query?.deptId || '')
    // dispatch({
    //   type:'Evaluation/checkDemocracyEvaluationTime',
    //   payload:{}
    // }).then((res)=>{
    //   setStatus(res)
    // })
  }, [])
  const callback = (key) => {
    console.log(key);
  }
  const handleSubmit = e => {
    dispatch({
      type:'Public/login',
      payload:{account,password}
    }).then((res)=>{
    })
  };
  return (
    <div className={styles.memberInformation}>
      {isLogin ? (
        <><div className={styles.infoTop}>
          <img
            className={styles.infoImg}
            referrerpolicy="no-referrer"
            src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngdc503ad59eaf39ff12dc6fed88937eaa3786ae8c603cf1e75e49a07daa0e510d"
          />
          <div className={styles.info}>
            <span className={styles.name}>上午好！秦晓园<span className={styles.tip}>喝杯热咖啡精神精神</span></span>
            <span className={styles.card}>ID:0000001</span>
            <span className={styles.iphone}>绑定手机：18933727391</span>
          </div>
        </div>
          <div className={styles.infoBot}>
            <Tabs className={styles.tabs} defaultActiveKey="1" onChange={() => { callback() }} >
              <TabPane tab="基本信息" key="1" >
                <div className={styles.basic}>
                  <div className={styles.row}>
                    <div className={styles.col}>
                      <span className={styles.label}>真实姓名:</span>
                      <span className={styles.val}>张霞</span>
                    </div>
                    <div className={styles.col}>
                      <span className={styles.label}>地址:</span>
                      <span className={styles.val}>北京市海淀区西三旗街道126号</span>
                    </div>
                  </div>
                  <div className={styles.row}>
                    <div className={styles.col}>
                      <span className={styles.label}>生日:</span>
                      <span className={styles.val}>1987-9-1</span>
                    </div>
                    <div className={styles.col}>
                      <span className={styles.label}>职业:</span>
                      <span className={styles.val}>医药销售</span>
                    </div>
                  </div>
                  <div className={styles.row}>
                    <div className={styles.col}>
                      <span className={styles.label}>会员卡号:</span>
                      <span className={styles.val}>张霞</span>
                    </div>
                  </div>
                </div>
              </TabPane>
            </Tabs>
          </div>
          <div className={styles.infoApp}>
            <div className={styles.infoTopApp}>
              <img
                className={styles.infoImgApp}
                referrerpolicy="no-referrer"
                src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngc81b78fcff1fed40435384130a72937ea6f4b823a58a60b8c5074a13005f3ada"
              />
              <div className={styles.info}>
                <span className={styles.name}>上午好！秦晓园</span>
                <span className={styles.tip}>喝杯热咖啡精神精神</span>
              </div>
            </div>
            <div className={styles.infoBasic}>
              <div className={styles.row}>
                <span className={styles.label}>姓名</span>
                <span className={styles.val}>秦晓园</span>
              </div>
              <div className={styles.row}>
                <span className={styles.label}>性别</span>
                <span className={styles.val}>女</span>
              </div>
              <div className={styles.row}>
                <span className={styles.label}>身份证号</span>
                <span className={styles.val}>14073226388655221</span>
              </div>
              <div className={styles.row}>
                <span className={styles.label}>登陆账号</span>
                <span className={styles.val}>Qxiaoyuan2iuu6</span>
              </div>
              <div className={styles.row}>
                <span className={styles.label}>绑定手机</span>
                <span className={styles.val}>18688673213</span>
              </div>
              <div className={styles.row}>
                <span className={styles.label}>地址</span>
                <span className={styles.val}>北京市海淀区双榆树北里18号3层601</span>
              </div>
            </div>
          </div></>
      ) : (<div className={styles.infoLogin}>
        <div className={styles.loginBox}>
          <div className={styles.login}> 账号登陆 </div>
          <div className={styles.loginApp}> LOGO </div>
          <div className={styles.loginAppTip}> 登陆查看您的会员信息 </div>
          <div className={true ? styles.loginInput : styles.loginErrInput}>
            <Input value={account} className={styles.input} placeholder="用户名" onChange={(e)=>{
              setAccount(e.target.value)
            }} />
            <Input.Password value={password} type="password" className={styles.input} placeholder="输入密码" onChange={(e)=>{
              setPassword(e.target.value)
            }} />
          </div>
          {false && <span className={styles.errTip}> xxx错误</span>}
          <Button onClick={handleSubmit} className={styles.loginButton}>
            登陆
          </Button>
        </div>
      </div >)
      }


    </div >
  );
};

export default connect(({ }) => ({}))(memberInformation);
